﻿<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>注册</title>
    <link rel="stylesheet" href="./css/tailwind.min.css" />

    <link rel="stylesheet" href="css/iziToast.min.css" />
    <link rel="stylesheet" href="css/demo.css" />
    <style>
      .dlbox .weixin,
      .dlbox .weibo {
        display: inline-block;
        width: 32px;
        height: 32px;
        background-size: cover;
      }

      .dlbox .weixin {
        background-image: url(images/weixin.png);
      }

      .dlbox .weibo {
        background-image: url(images/weibo.png);
      }
      .bg-indigo-100 {
        background-color: #ebf4ff;
      }
      .border-gray-200 {
        border-color: #edf2f7;
      }
      .bg-gray-100 {
        background-color: #f7fafc;
      }
      .bg-indigo-500 {
        background-color: #667eea;
      }
    </style>
  </head>

  <body
    class="min-h-screen bg-gray-100 text-gray-900 flex justify-center dlbox"
  >
    <div
      class="max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1"
    >
      <div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
        <div class="mt-12 flex flex-col items-center">
          <h1 class="text-2xl xl:text-3xl font-extrabold">用户注册</h1>
          <div class="w-full flex-1 mt-8">
            <div class="my-12 border-b text-center">
              <div
                class="leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2"
              >
                使用电子邮箱注册
              </div>
            </div>

            <div class="mx-auto max-w-xs">
              <input
                id="inp_name"
                class="w-full aaa px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"
                type="name"
                placeholder="真实姓名"
              />
              <input
                id="inp_email"
                class="w-full aaa mt-5 px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"
                type="email"
                placeholder="电子邮箱"
              />
              <input
                id="inp_pwd"
                class="w-full bbb px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
                type="password"
                placeholder="密码"
              />
              <button
                class="mt-5 dl tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
              >
                <span class="ml-3">注 册</span>
              </button>
            </div>
            <div class="my-12 border-b text-center">
              <div
                class="leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2"
              >
                <a href="./login.html">已有账号？去登录</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1 bg-indigo-100 text-center hidden lg:flex">
        <div
          class="m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat"
          style="background-image: url('images/dlbox.svg')"
        ></div>
      </div>
    </div>
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="js/iziToast.min.js" type="text/javascript"></script>
    <script src="js/demo.js" type="text/javascript"></script>
    <script src="./js/register.js"></script>
  </body>
</html>
